<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
    <link href="plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
</head>

<body>
    <div class="row">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="col-lg-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>变化图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="gnumber"></div>
                    </div>
                </div>
            </div>
            <div class=" col-lg-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>变化图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="tnumber"></div>
                    </div>
                </div>
            </div>
            <div class=" col-lg-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>变化图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="scnumber"></div>
                    </div>
                </div>
            </div>
            <div class=" col-lg-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>变化图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="wnumber"></div>
                    </div>
                </div>
            </div>
            <div class=" col-lg-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>变化图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="demo"></div>
                    </div>
                </div>
            </div>
            <div class=" col-lg-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>变化图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="snumber"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>


<script src="js/jquery.min.js"></script>
<script src="plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="plugins/waves-0.7.5/waves.min.js"></script>
<script src="js/echarts-all.js"></script>

<script type="text/javascript">
    var ajaxurl = 'http://118.24.115.242:8888/';
    
    $.get(ajaxurl+"school/data",{"data": "graduateNum"},function (data) {
        if (data.data !== null){
            num = data.data[0].data;
            year = data.data[0].year;


            // 四川省毕业人数折线变化图   
            var gnumber = echarts.init(document.getElementById('gnumber'));
            var option = {
                title: {
                    text: '四川省毕业人数折线变化图',
                    left: 'center',
                    show: true
                },
                tooltip: {},
                legend: {
                    data: ['人数']
                },
                xAxis: {
                    data: year
                },
                yAxis: {},
                series: [{
                    type: 'line',
                    data: num
                }]
            }
            gnumber.setOption(option);
            $(window).resize(gnumber.resize);
        }
    });


    $.get(ajaxurl+"school/data",{"data": "internalNum"},function (data) {
        if (data.data !== null){
            num = data.data[0].data;
            year = data.data[0].year;
            console.log(data.data[0].data)

            // 四川省在校人数折线变化图
            var snumber = echarts.init(document.getElementById('snumber'));
            var option2 = {
                title: {
                    text: '四川省在校人数折线变化图',
                    left: 'center',
                    show: true
                },
                tooltip: {},
                legend: {
                    data: ['人数']
                },
                xAxis: {
                    data: year
                },
                yAxis: {},
                series: [{
                    type: 'line',
                    data: num
                }]
            }
            snumber.setOption(option2);
            $(window).resize(snumber.resize);
        }
    });


    $.get(ajaxurl+"school/data",{"data": "teacherNum"},function (data) {
        if (data.data !== null){
            num = data.data[0].data;
            year = data.data[0].year;
            console.log(data.data[0].data)


            //四川省专业教师折线变化图
            var tnumber = echarts.init(document.getElementById('tnumber'));
            var option3 = {
                title: {
                    text: '四川省专业教师折线变化图',
                    left: 'center',
                    show: true
                },
                tooltip: {},
                legend: {
                    data: ['人数']
                },
                xAxis: {
                    data: year
                },
                yAxis: {},
                series: [{
                    type: 'line',
                    data: num
                }]
            }
            tnumber.setOption(option3);
            $(window).resize(tnumber.resize);
        }
    });


    $.get(ajaxurl+"school/data",{"data": "enrollmentNum"},function (data) {
        if (data.data !== null){
            num = data.data[0].data;
            year = data.data[0].year;
            console.log(data.data[0].data)

            //四川省招生折线变化图
            var scnumber = echarts.init(document.getElementById('scnumber'));
            var option4 = {
                title: {
                    text: '四川省招生折线变化图',
                    left: 'center',
                    show: true
                },
                tooltip: {},
                legend: {
                    data: ['人数']
                },
                xAxis: {
                    data: year
                },
                yAxis: {},
                series: [{
                    type: 'line',
                    data: num
                }]
            }
            scnumber.setOption(option4);
            $(window).resize(scnumber.resize);
        }
    }); 

    $.get(ajaxurl+"school/data",{"data": "schoolNum"},function (data) {
        if (data.data !== null){
            num = data.data[0].data;
            year = data.data[0].year;
       

            //四川省中职学校数量折线变化图
            var wnumber = echarts.init(document.getElementById('wnumber'));
            var option5 = {
                title: {
                    text: '四川省中职学校折线变化图',
                    left: 'center',
                    show: true
                },
                tooltip: {},
                legend: {
                    data: ['人数']
                },
                xAxis: {
                    data: year
                },
                yAxis: {},
                series: [{
                    type: 'line',
                    data: num
                }]
            }
            wnumber.setOption(option5);
            $(window).resize(wnumber.resize);
        }
    });



    //元饼图demo
    var demo = echarts.init(document.getElementById('demo'));
    option6 = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: ['2012', '2013', '2014', '2015', '2016']
        },
        series: [
            {
                name: '招生数',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {value: 335, name: '2012'},
                    {value: 310, name: '2013'},
                    {value: 234, name: '2014'},
                    {value: 135, name: '2015'},
                    {value: 1548, name: '2016'}
                ]
            }
        ]
    };

    demo.setOption(option6);
    $(window).resize(demo.resize);

</script>


</html>